<template>
	<view class="home">
    <view
        class="home-navbar"
        :style="{ paddingTop: geStatusBarHeight() + getNavBarHeight() + 'px' }">
      <view class="home-navbar-header">
        <div class="home-navbar-header-left" @click="showFarm = true">
          <span class="farm-name">{{ farm.label }}</span>
          <u-icon name="arrow-down" color="#fff" size="28"></u-icon>
        </div>
        <div class="home-navbar-header-right">
          <span class="date-value">{{ dateValue }}</span>
          <span class="date-value">{{ weekValue }}</span>
        </div>
      </view>

      <view class="home-navbar-banner">
        <swiper class="banner-swiper" indicator-dots circular autoplay :interval="5000" :duration="1000">
          <swiper-item
              @click="toBannerDetail(item)"
              class="banner-swiper-item" v-for="(item, index) in swipers" :key="index">
            <image :src="item.image" mode="widthFix"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="home-tabs">
      <view
          @click="changeTab(item)"
          :class="['home-tab', activeTab.id === item.id ? 'active' : '']" v-for="item in tabButtons">
        {{ item.name }}
      </view>
    </view>
    <view class="home-body" v-show="activeTab.id === 1">
      <div class="home-drop">
<!--        <div class="home-drop-item" @click="showGrowthStep = true">-->
<!--          <span class="drop-name">{{ growthItem.label || '生长阶段' }}</span>-->
<!--          <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>-->
<!--        </div>-->
<!--        <div class="home-drop-item" @click="showGrowthAge = true">-->
<!--          <span class="drop-name">{{ agetItem.label || '年龄' }}</span>-->
<!--          <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>-->
<!--        </div>-->
<!--        <div class="home-drop-item" @click="showGrowthMonth = true">-->
<!--          <span class="drop-name">{{ dropItem2.label || '时间' }}</span>-->
<!--          <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>-->
<!--        </div>-->
      </div>
      <Box title="存栏" show-title>
        <view class="charts-box">
          <qiun-data-charts
              style="width: 100%;height: 100%"
              type="column"
              :opts="commonOption"
              :chartData="chartsDataColumn1"
          />
        </view>
      </Box>
      <Box title="进出栏" show-title>
        <view class="charts-box">
          <qiun-data-charts
              style="width: 100%;height: 100%"
              type="mix"
              :opts="mixOption"
              :chartData="chartsDataColumn2"
          />
        </view>
      </Box>
      <Box title="生长指标" show-title>
        <div class="home-drop-item chart-drop" @click="showCategory = true">
          <span class="drop-name">{{ categoryItem.label || '全部品种' }}</span>
          <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
        </div>
        <view class="charts-box">
          <qiun-data-charts
              style="width: 100%;height: 100%"
              type="area"
              :opts="areaOption"
              :chartData="chartsDataColumn3"
          />
        </view>
      </Box>
      <Box title="繁育指标" show-title style="height: 690rpx">
        <div class="home-drop-item chart-drop" @click="showCategory2 = true">
          <span class="drop-name">{{ categoryItem2.label || '全部品种' }}</span>
          <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
        </div>
        <view class="charts-box">
          <qiun-data-charts
              style="width: 100%;height: 100%"
              type="ring"
              :opts="ringOption"
              :chartData="chartsDataColumn4"
          />
        </view>
      </Box>
      <Box title="疾病情况" show-title height="initial">
        <div class="home-drop-item chart-drop" @click="showCategory3 = true">
          <span class="drop-name">{{ categoryItem3.label || '全部品种' }}</span>
          <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
        </div>
        <view class="rect-group-name">康复数：{{ chartsDataColumn5Count }}头</view>
        <view class="rect-list">
          <view class="rect-row" v-for="item in chartsDataColumn5">
            <view class="rect-item">
              <view class="rect-item-name">患病类型</view>
              <view class="rect-item-value">{{ item.name }}</view>
            </view>
            <view class="rect-item active">
              <view class="rect-item-name">患病数</view>
              <view class="rect-item-value">{{ item.value }}</view>
            </view>
          </view>
        </view>
      </Box>
    </view>
    <view class="home-body" v-if="activeTab.id === 2">
      <Box :title="title1" height="initial">
        <view class="progress-box">
          <view class="progress_bg">
            <view class="progress" :style="{ width: farmData.breeding ,backgroundColor: '#FC6B24'}"></view>
          </view>
        </view>
        <view class="progress-text">
          <view class="progress-item active">
            <view class="progress-item-name">计划繁育：</view>
            <view class="progress-item-value">{{ farmData.planBreeding }}头</view>
          </view>
          <view class="progress-item">
            <view class="progress-item-name">实际繁育：</view>
            <view class="progress-item-value">{{ farmData.actualBreeding }}头</view>
          </view>
        </view>
      </Box>
      <Box :title="title2" height="initial">
        <view class="progress-box">
          <view class="progress_bg">
            <view class="progress" :style="{width: farmData.fattening,backgroundColor: '#FF2C6A'}"></view>
          </view>
        </view>
        <view class="progress-text">
          <view class="progress-item active">
            <view class="progress-item-name">计划育肥：</view>
            <view class="progress-item-value">{{ farmData.planFattening }}头</view>
          </view>
          <view class="progress-item">
            <view class="progress-item-name">实际育肥：</view>
            <view class="progress-item-value">{{ farmData.actualFattening }}头</view>
          </view>
        </view>
      </Box>
      <Box :title="title3" height="initial">
        <view class="progress-box">
          <view class="progress_bg">
            <view class="progress" :style="{width: farmData.slaughter,backgroundColor: '#249CFF'}"></view>
          </view>
        </view>
        <view class="progress-text">
          <view class="progress-item active">
            <view class="progress-item-name">计划出栏：</view>
            <view class="progress-item-value">{{ farmData.planSlaughter }}头</view>
          </view>
          <view class="progress-item">
            <view class="progress-item-name">实际出栏：</view>
            <view class="progress-item-value">{{ farmData.actualSlaughter }}头</view>
          </view>
        </view>
      </Box>
    </view>
    <!--    牛场 -->
    <u-select
        :default-value="[defaultFarmIndex]"
        v-model="showFarm"
        :list="farmList"
        @cancel="showFarm = false"
        @confirm="confirmFarm">
    </u-select>
<!--    品种1 -->
    <u-select
        v-model="showCategory"
        :default-value="[defaultCategoryIndex]"
        :list="categoryList"
        @cancel="showCategory = false"
        @confirm="confirmCategory">
    </u-select>
    <!--    品种2 -->
    <u-select
        v-model="showCategory2"
        :default-value="[defaultCategoryIndex2]"
        :list="categoryList"
        @cancel="showCategory2 = false"
        @confirm="confirmCategory2">
    </u-select>
    <!--    品种3 -->
    <u-select
        v-model="showCategory3"
        :default-value="[defaultCategoryIndex3]"
        :list="categoryList"
        @cancel="showCategory3 = false"
        @confirm="confirmCategory3">
    </u-select>
<!--    阶段-->
    <u-select
        v-model="showGrowthStep"
        :list="growthStepList"
        @cancel="showGrowthStep = false"
        @confirm="confirmGrowthStep">
    </u-select>
<!--    年龄-->
    <u-select
        v-model="showGrowthAge"
        :list="growthAgeList"
        @cancel="showGrowthAge = false"
        @confirm="confirmGrowthAge">
    </u-select>
<!--    时间-->
    <u-picker
        v-model="showGrowthMonth"
        mode="time"
        :start-year="2020"
        :end-year="ownYear"
        :params="{
          year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
        }"
        @cancel="showGrowthMonth = false"
        @confirm="confirmGrowthMonth">
    </u-picker>
	</view>
</template>

<script>
  import { mapState } from 'vuex'
  import Box from "../../components/box.vue";
	export default {
    components: {
      Box
    },
		data() {
			return {
        // 农场列表
        showFarm: false,
        farmList: [],
        ownYear: new Date().getFullYear(),
        // 品种选择器
        showCategory: false,
        showCategory2: false,
        showCategory3: false,
        categoryList: [

        ],
        // 生长阶段
        showGrowthStep: false,
        growthStepList: [
          {
            value: '1',
            label: '生长阶段1'
          },
          {
            value: '2',
            label: '生长阶段2'
          },
        ],
        // 年龄
        showGrowthAge: false,
        growthAgeList: [
          {
            value: '1',
            label: '0-1岁'
          },
          {
            value: '2',
            label: '1-2岁'
          },
        ],
        // 时间
        showGrowthMonth: false,
				dateValue: '',
        weekValue: '',
        swipers: [
        ],
        tabButtons: [
          {
            id: 1,
            name: '生产数据',
            icon: '',
            activeIcon: ''
          },
          {
            id: 2,
            name: '生产进度'
          }
        ],
        activeTab: {
          id: 1,
          name: '生产数据'
        },
        growthItem: {
        },
        agetItem: {
        },
        dropItem2: {
          name: '2024年9月'
        },
        // 通用option
        commonOption: {
          legend: { show: false },
          padding: [50, 15, 10, 15],
          xAxis: {
            axisLineColor: '#B1B1B1',
            calibration: false,
            fontColor: '#B1B1B1',
            fontSize: 12,
            lineHeight: 20
          },
          yAxis: {
            disableGrid: true,
            data: [
              {
                calibration: false,
                fontColor: '#B1B1B1',
                fontSize: 12,
                lineHeight: 17
              }
            ]
          },
          extra: {
            column: {
              width: 10,
              barBorderCircle: true,
              barBorderRadius: [4, 4,0,0]
            }
          }
        },
        // 存栏
        chartsDataColumn1: {},
        // 进出栏
        chartsDataColumn2: {},
        // 生长指标
        chartsDataColumn3: {},
        categoryItem: {
        },
        // 繁育指标
        categoryItem2: {
        },
        chartsDataColumn4: {},
        // 疾病情况
        categoryItem3: {
        },
        chartsDataColumn5Count: 0,
        chartsDataColumn5: [
        ],
        /**
         * 生产进度
         */
        title1:'繁育',
        title2: '育肥',
        title3: '出栏',
        farmData: {
          breeding: '0%',
          fattening: '0%',
          slaughter: '0%',
          // 计划繁育
          planBreeding: '0',
          // 实际繁育
          actualBreeding: '0',
          // 计划育肥
          planFattening: '0',
          // 实际育肥
          actualFattening: '0',
          // 计划出栏
          planSlaughter: '0',
          // 实际出栏
          actualSlaughter: '0',
        }
			}
		},
    computed: {
      ...mapState(['farm']),
      defaultFarmIndex() {
        return this.farmList.findIndex(item => item.value == this.farm.value)
      },
      defaultCategoryIndex() {
        return this.categoryList.findIndex(item => item.value == this.categoryItem.value)
      },
      defaultCategoryIndex2() {
        return this.categoryList.findIndex(item => item.value == this.categoryItem2.value)
      },
      defaultCategoryIndex3() {
        return this.categoryList.findIndex(item => item.value == this.categoryItem3.value)
      },
      mixOption() {
        return {
          ...this.commonOption,
          padding: [10, 15, 10, 15],
          legend: {
            show: true,
            position: 'top',
            float: 'right'
          },
          yAxis: {
            disableGrid: true,
            data: [
              {
                calibration: false,
                fontColor: '#B1B1B1',
                fontSize: 12,
                lineHeight: 17,
                title: ''
              }
            ]
          },
          extra: {
            mix: {
              area:{
                width: 2,
                opacity: 1,
                gradient: true,
                addLine: true
              }
            }
          }
        }
      },
      areaOption() {
        return {
          ...this.commonOption,
          xAxis: {
            ...this.commonOption.xAxis,
            boundaryGap: 'justify'
          },
          type: 'area',
          dataLabel:false,
          extra: {
            area: {
              opacity: 1,
              gradient: true,
              addPoint: true
            }
          }
        }
      },
      ringOption() {
        return {
          ...this.commonOption,
          legend: {
            show: true,
            position: 'bottom',
            float: 'left'
          },

        }
      }
    },
    watch: {
      farm: {
        handler(val) {
          this.setChartData()
          this.planList()
        },
        deep: true,
      }
    },
    onShow() {
      const userInfo = uni.getStorageSync('userInfo') || {};
      if (!userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录后使用',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              uni.removeStorageSync('userInfo');
              uni.redirectTo({
                url: '/pages/user/login'
              })
            }
          }
        })
      }
      this.planList()
      this.getNowDate()
      this.setChartData()
    },
    onLoad() {
      this.init()
    },
		methods: {
      init() {
        this.$api.bannerList().then(res => {
              this.swipers = res.map(item => {
                return {
                  id: item.id,
                  image: item.image
                }
              })
        })
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 0
        })
        this.$api.companyList().then(res => {
          this.farmList = res.map(item => {
            return {
              value: item.id,
              label: item.comp_name
            }
          })
          if (this.farmList.length) {
            const checkFarm = this.farmList.find(item => item.value === this.farm.value)
            if (!checkFarm) {
              this.$store.commit('SET_FARM', this.farmList[0])
            }
          } else {
            uni.showToast({
              title: '暂无农场数据',
              icon: 'none'
            })
          }
        }).finally(() => {
          uni.hideLoading()
        })
      },
      toBannerDetail(item) {
        uni.navigateTo({
          url: '/pages/bannerDetail/bannerDetail?id=' + item.id
        })
      },
      // 确认生长阶段
      confirmGrowthStep(e) {
        this.growthItem = {
          ...e[0]
        }
      },
      // 确认年龄
      confirmGrowthAge(e) {
        this.agetItem = {
          ...e[0]
        }
      },
      // 确认时间
      confirmGrowthMonth(e) {
      },
      // 确认品种
      confirmCategory(e) {
        this.categoryItem = {
          ...e[0]
        }
        this.setChart3()
      },
      // 确认品种2
      confirmCategory2(e) {
        this.categoryItem2 = {
          ...e[0]
        }
        this.setChart4()
      },
      // 确认品种3
      confirmCategory3(e) {
        this.categoryItem3 = {
          ...e[0]
        }
        this.setChart5()
      },
      confirmFarm(e) {
        this.$store.commit('SET_FARM', e[0])
      },
      setChartData() {
        this.setChart1()
        this.setChart2()
        this.setChart3()
        this.setChart4()
        this.setChart5()
      },
      setChart1() {
        //存栏数据
        this.$api.getBeefGroupList().then(res => {
          let groupMap = {}
          res.forEach(item => {
            let breed = item.breed || '未知品种'
            if (!groupMap[breed]) {
              groupMap[breed] = []
            }
            groupMap[breed].push(item)
          })
          let xData = Object.keys(groupMap)
          this.categoryList = [
            {
              value: '',
              label: '全部品种'
            },
            ...xData.filter(item => item !== '未知品种').map(item => {
              return {
                value: item,
                label: item,
                beefno: groupMap[item].map(el => el.beefno)
              }
            })
          ]
          let yData = []
          xData.forEach(item => {
            yData.push(groupMap[item].length)
          })
          this.chartsDataColumn1 = {
            categories: xData,
            series: [{
              name: "存栏数量",
              data: yData,
              color: '#2498F6',
              textColor: '#2498F6',
              textSize: 10,
              format: 'unitTou'
            }]
          }
        })
      },
      setChart2() {
        //进出栏数据
        this.$api.getBeefInOutList().then(res => {
          // 这是一个牛只的进栏、出栏记录，里面有字段表示是进或者出，当nowcom等于farm_id，为出栏，当tocom等于farm_id，为进栏
          // 需要以品种维度，统计每个品种的进栏、出栏数量
          let groupMap = {}
          res.forEach(item => {
            let breed = '未知品种'
            if (item.beefModel) {
              breed = item.beefModel.breed || '未知品种'
            }
            if (!groupMap[breed]) {
              groupMap[breed] = {
                in: 0,
                out: 0
              }
            }
            if (item.nowcomp === this.farm.value) {
              groupMap[breed].out++
            }
            if (item.tocomp === this.farm.value) {
              groupMap[breed].in++
            }
          })
          let xData= []
          let yDataIn = []
          let yDataOut = []
          for (const groupMapKey in groupMap) {
            xData.push(groupMapKey)
            yDataIn.push(groupMap[groupMapKey].in)
            yDataOut.push(groupMap[groupMapKey].out)
          }
          this.chartsDataColumn2 = {
            categories: xData,
            series: [{
              name: "进栏",
              data: yDataIn,
              color: '#2498F6',
              textColor: '#2498F6',
              textSize: 10,
              format: 'unitTou',
              type: "area",
              style: "curve",
              addPoint: true,
            }, {
              name: "出栏",
              data: yDataOut,
              color: '#FF2424',
              textColor: '#FF2424',
              textSize: 10,
              format: 'unitTou',
              type: 'line',
              style: "curve",
              addPoint: true
            }]
          }
        })
      },
      setChart3() {
        // 生长指标
        this.chartsDataColumn3 = {
          categories: ['10天', '20天', '30天', '40天', '50天', '60天'],
          series: [{
            name: "生长指标",
            data: [100, 100, 100, 100, 100, 100],
            color: '#FFCC00',
            textColor: '#FFCC00',
            type: "area",
            style: "curve",
            addPoint: true
          }]
        }
      },
      setChart4() {
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 0
        })
        this.$api.getBreedIndex({
          breed: this.categoryItem2.label
        }).then(res => {
          // 繁育指标
          this.chartsDataColumn4 = {
            series: [{
              name: "繁育指标",
              data: res,
              color: '#A0A0A0',
              textColor: '#A0A0A0',
            }]
          }
        }).finally(() => {
          uni.hideLoading()
        })
      },
      setChart5() {
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 0
        })
        this.$api.getDiseaseList({
          breed: this.categoryItem3.label
        }).then(res => {
          // 疾病情况
          this.chartsDataColumn5Count = res.recoverCount
          this.chartsDataColumn5 = res.diseaseTypeList
        }).finally(() => {
          uni.hideLoading()
        })
      },
      changeTab(item) {
        this.activeTab = item
      },
      /**
       * 生产计划
       */
      planList() {
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 0
        })
        this.$api.getPlanList().then(res => {
          let breeding = res.find(item => item.name === '繁育')
          let fattening = res.find(item => item.name === '育肥')
          let slaughter = res.find(item => item.name === '出栏')
          this.farmData = {
            // 计划繁育
            breeding: breeding.percent,
            // 计划育肥
            fattening: fattening.percent,
            // 计划出栏
            slaughter: slaughter.percent,
            // 计划繁育
            planBreeding: breeding.planCount,
            // 实际繁育
            actualBreeding: breeding.count,
            // 计划育肥
            planFattening: fattening.planCount,
            // 实际育肥
            actualFattening: fattening.count,
            // 计划出栏
            planSlaughter: slaughter.planCount,
            // 实际出栏
            actualSlaughter: slaughter.count,
          }
          this.title1 = '繁育：' + this.farmData.breeding
          this.title2 = '育肥：' + this.farmData.fattening
          this.title3 = '出栏：' + this.farmData.slaughter
        }).finally(() => {
          uni.hideLoading()
        })
      },
      getNowDate() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let week = date.getDay()
        let weekArray = ['日', '一', '二', '三', '四', '五', '六']
        this.dateValue = `${year}/${month}/${day}`
        this.weekValue = `星期${weekArray[week]}`
      },
      // 获取状态栏高度
      geStatusBarHeight(){
        return uni.getSystemInfoSync()['statusBarHeight']
      },
      // 获取导航栏高度
      getNavBarHeight(){
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）
        let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2
        // #endif
        // #ifdef APP-PLUS || H5
        let navbarHeight = 44
        // #endif
        return navbarHeight
      },
		},
	}
</script>

<style lang="scss">
.home {
  height: 100%;
  overflow: auto;
  background-color: #F8F9FD;
  .progress-box {
    padding: 20rpx 30rpx;
    position: relative;
    height: 60rpx;
    box-sizing: border-box;
    .progress {
      box-sizing: border-box;
      height: 20rpx;
      background: red;
      border-radius: 10rpx;
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      transition: all .5s;
    }
    .progress_bg {
      width: 100%;
      box-sizing: border-box;
      height: 20rpx;
      background: #F8F9FD;
      border-radius: 10rpx;
      position: relative;
    }
  }
  .progress-text {
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    .progress-item {
      flex: 1;
      display: flex;
      align-items: center;
      color: #808080;
      .progress-item-name {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 25rpx;
        line-height: 30rpx;
      }
      .progress-item-value {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 25rpx;
        line-height: 30rpx;
      }
    }
    .progress-item.active {
      color: #249CFF;
    }
  }
  .rect-group-name {
    padding: 20rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 25rpx;
    color: #249CFF;
    line-height: 56rpx;
  }
  .rect-row {
    display: flex;
    align-items: center;
  }
  .rect-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #D8D8D8;
    border-right:  1px solid #D8D8D8;
    height: 148rpx;
    .rect-item-name,
    .rect-item-value{
      font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
      font-weight: normal;
      font-size: 25rpx;
      color: #333333;
      line-height: 29rpx;
      margin: 10rpx;
    }
    &.active {
      .rect-item-value {
        color: #2498F6;
      }
      border-right: none;
    }
  }
  .charts-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 20rpx;
  }
  .home-drop {
    display: flex;
    align-items: center;
  }
  .home-drop-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(36,152,246,0.36);
    border-radius: 33rpx 33rpx 33rpx 33rpx;
    padding: 18rpx 30rpx;
    margin-right: 34rpx;
    .drop-name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      line-height: 30rpx;
      color: #000000;
      margin-right: 20rpx;
    }
  }
  .home-drop-item.chart-drop {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 99;
  }
  .home-tabs {
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .home-tab {
      width: 336rpx;
      height: 124rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(35,151,246,0.37);
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      line-height: 124rpx;
      text-align: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 35rpx;
      color: #000000;
      cursor: pointer;
      &.active {
        color: #ffffff;
        background-color: #2498F6;
      }
    }
  }

  .home-body {
    padding: 0 30rpx 30rpx;
  }
  .home-navbar {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient( 180deg, #1C94F6 0%, #F8F9FD 100%);
    .home-navbar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      .home-navbar-header-left {
        display: flex;
        align-items: center;
        .farm-name {
          color: #fff;
          font-size: 28rpx;
          font-weight: 500;
          margin-right: 10rpx;
          line-height: 52rpx;
        }
      }
      .home-navbar-header-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 28rpx;
        line-height: 52rpx;
        .date-value {
          margin-left: 10rpx;
        }
      }
    }
    .home-navbar-banner {
      width: 100%;
      padding: 20rpx 30rpx;
    }
    .banner-swiper {
      width: 100%;
      height: 264rpx;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(47,157,247,0.37);
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      overflow: hidden;
      .banner-swiper-item {
        image {
          width: 100%;
        }
      }
    }
  }
}
</style>
